<template>
  <div class="the-starry-night">
    <div class="sky" />
    <div class="moon" />
    <div class="background" />
    <div class="cloud1" />
    <div class="cloud2" />
    <div class="cloud3" />
    <div class="cloud4" />
    <div class="cloud5" />
    <div class="cloud6" />
    <div class="stars" />
    <div class="tree" />
  </div>
</template>

<style scoped>
body {
  background-color: lightyellow;
}
.the-starry-night {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: rgb(111, 151, 184);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sky,
.sky::before,
.sky::after,
.moon,
.moon::before,
.moon::after,
.stars,
.stars::before,
.stars::after,
.background,
.cloud1,
.cloud2,
.cloud3,
.cloud4,
.cloud5,
.cloud6,
.tree,
.background::before,
.background::after {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.sky::before {
  content: '';
  display: block;
  clip-path: polygon(
    0% 0%,
    -0% 10%,
    3% 21%,
    12% 28%,
    27% 24%,
    38% 15%,
    50% 14%,
    60% 20%,
    63% 30%,
    58% 39%,
    72% 33%,
    79% 27%,
    80% 21%,
    78% 10%,
    82% 3%,
    89% -2%
  );
  background-color: rgb(45, 68, 131);
}
.sky::after {
  content: '';
  display: block;
  clip-path: polygon(
    -1% 13%,
    5% 24%,
    16% 27%,
    29% 21%,
    39% 13%,
    54% 16%,
    60% 22%,
    62% 32%,
    65% 39%,
    77% 40%,
    83% 41%,
    91% 41%,
    94% 41%,
    97% 39%,
    101% 38%,
    97% 45%,
    92% 53%,
    87% 56%,
    82% 60%,
    72% 59%,
    61% 55%,
    54% 54%,
    45% 53%,
    39% 50%,
    36% 44%,
    34% 41%,
    33% 40%,
    30% 43%,
    23% 48%,
    16% 51%,
    7% 54%,
    -1% 50%
  );
  background-color: rgb(137, 173, 205);
}
.moon {
  clip-path: polygon(
    88% 0%,
    96% 0%,
    100% 6%,
    101% 15%,
    99% 24%,
    92% 29%,
    84% 25%,
    81% 15%,
    83% 5%
  );
  background-color: rgba(200, 200, 130, 0.8);
  animation: moon 2s infinite alternate linear;
}
@keyframes moon {
  0% {
  }
  100% {
    clip-path: polygon(
      85% 2%,
      93% -1%,
      100% 6%,
      101% 15%,
      100% 22%,
      97% 27%,
      88% 27%,
      82% 19%,
      82% 9%
    );
  }
}
.moon::before {
  content: '';
  display: block;
  clip-path: polygon(
    93% 4%,
    86% 8%,
    85% 16%,
    88% 23%,
    95% 24%,
    100% 19%,
    98% 9%
  );
  background-color: rgb(232, 234, 159);
  animation: moon_before 2s infinite alternate linear;
}
@keyframes moon_before {
  0% {
  }
  100% {
    clip-path: polygon(
      96% 6%,
      89% 6%,
      85% 10%,
      86% 19%,
      92% 25%,
      97% 22%,
      100% 14%
    );
  }
}
.moon::after {
  content: '';
  display: block;
  clip-path: polygon(
    95% 8%,
    93% 7%,
    89% 8%,
    86% 14%,
    87% 19%,
    92% 23%,
    96% 22%,
    98% 17%,
    98% 14%,
    95% 18%,
    92% 18%,
    90% 14%,
    91% 10%
  );
  background-color: rgb(220, 199, 49);
}
.stars {
  clip-path: polygon(
    13% 5%,
    14% -1%,
    5% -0%,
    4% 3%,
    7% 8%,
    11% 8%,
    18% 16%,
    21% 20%,
    27% 18%,
    26% 10%,
    20% 9%,
    18% 16%,
    11% 8%,
    4% 41%,
    1% 42%,
    0% 47%,
    4% 49%,
    6% 46%,
    9% 47%,
    10% 43%,
    14% 43%,
    15% 47%,
    14% 52%,
    11% 53%,
    9% 50%,
    9% 47%,
    6% 46%,
    4% 41%,
    11% 8%,
    30% 3%,
    31% -1%,
    38% -1%,
    38% 2%,
    40% -1%,
    44% 1%,
    43% 6%,
    41% 7%,
    38% 5%,
    38% 2%,
    36% 5%,
    33% 6%,
    30% 3%,
    11% 8%,
    28% 49%,
    28% 58%,
    32% 63%,
    39% 61%,
    42% 56%,
    41% 48%,
    35% 44%,
    31% 45%,
    35% 30%,
    32% 28%,
    30% 29%,
    28% 32%,
    29% 35%,
    33% 36%,
    35% 34%,
    35% 30%,
    31% 45%,
    65% 10%,
    60% 13%,
    56% 7%,
    57% 1%,
    62% 0%,
    66% 4%,
    65% 10%,
    31% 45%,
    67% 17%,
    66% 22%,
    70% 27%,
    75% 26%,
    77% 20%,
    74% 15%,
    70% 14%,
    67% 17%,
    31% 45%,
    28% 49%,
    11% 8%
  );
  background-color: rgba(200, 200, 130, 0.5);
  animation: stars 2s infinite alternate linear;
}
@keyframes stars {
  0% {
  }
  100% {
    clip-path: polygon(
      14% 4%,
      15% -3%,
      4% -0%,
      4% 5%,
      9% 9%,
      11% 8%,
      19% 11%,
      18% 16%,
      23% 20%,
      27% 15%,
      23% 9%,
      19% 11%,
      11% 8%,
      2% 41%,
      0% 46%,
      2% 49%,
      5% 48%,
      6% 43%,
      10% 44%,
      13% 43%,
      15% 46%,
      16% 51%,
      13% 53%,
      10% 51%,
      8% 48%,
      10% 44%,
      6% 43%,
      2% 41%,
      11% 8%,
      28% 4%,
      30% -1%,
      38% -1%,
      38% 4%,
      40% -1%,
      44% 0%,
      44% 5%,
      42% 8%,
      39% 8%,
      38% 5%,
      37% 7%,
      33% 8%,
      28% 4%,
      11% 8%,
      31% 46%,
      27% 53%,
      30% 61%,
      35% 63%,
      41% 60%,
      42% 52%,
      39% 46%,
      35% 45%,
      34% 30%,
      32% 28%,
      29% 30%,
      28% 33%,
      30% 36%,
      33% 37%,
      36% 34%,
      34% 30%,
      35% 44%,
      63% 12%,
      57% 11%,
      56% 4%,
      59% -1%,
      66% 0%,
      67% 8%,
      63% 12%,
      35% 44%,
      69% 14%,
      66% 19%,
      67% 24%,
      72% 27%,
      76% 23%,
      76% 17%,
      73% 14%,
      69% 14%,
      35% 44%,
      31% 46%,
      11% 8%
    );
  }
}
.stars::before {
  content: '';
  display: block;
  clip-path: polygon(
    34% 33%,
    31% 33%,
    30% 31%,
    32% 29%,
    35% 31%,
    69% 22%,
    71% 24%,
    74% 24%,
    75% 20%,
    73% 17%,
    71% 17%,
    69% 18%,
    61% 9%,
    65% 7%,
    64% 3%,
    61% 2%,
    59% 4%,
    60% 8%,
    61% 9%,
    69% 18%,
    69% 22%,
    37% 53%,
    35% 50%,
    31% 51%,
    31% 55%,
    34% 57%,
    37% 57%,
    37% 53%,
    14% 48%,
    13% 45%,
    10% 46%,
    4% 45%,
    3% 43%,
    2% 44%,
    1% 46%,
    3% 47%,
    4% 45%,
    10% 46%,
    10% 49%,
    13% 50%,
    14% 48%,
    37% 53%,
    69% 22%,
    35% 31%,
    40% 4%,
    43% 4%,
    42% 1%,
    40% 0%,
    39% 2%,
    40% 4%,
    35% -0%,
    34% 1%,
    32% 1%,
    32% -1%,
    35% -0%,
    40% 4%,
    11% 0%,
    6% -1%,
    7% 3%,
    10% 5%,
    13% 4%,
    12% 0%,
    20% 16%,
    23% 17%,
    25% 15%,
    24% 12%,
    22% 12%,
    20% 13%,
    20% 16%,
    12% 0%,
    40% 4%,
    35% 31%
  );
  background-color: rgb(207, 209, 136);
  animation: stars_before 2s infinite alternate linear;
}
@keyframes stars_before {
  0% {
  }
  100% {
    clip-path: polygon(
      34% 35%,
      31% 35%,
      29% 31%,
      32% 29%,
      35% 31%,
      69% 21%,
      70% 25%,
      73% 25%,
      75% 23%,
      75% 19%,
      73% 16%,
      70% 17%,
      59% 8%,
      63% 8%,
      64% 6%,
      63% 2%,
      60% 2%,
      58% 5%,
      59% 8%,
      70% 17%,
      69% 21%,
      37% 51%,
      33% 49%,
      31% 53%,
      32% 57%,
      35% 58%,
      38% 56%,
      37% 51%,
      15% 51%,
      15% 45%,
      11% 44%,
      4% 45%,
      3% 43%,
      2% 44%,
      1% 46%,
      3% 47%,
      4% 45%,
      11% 44%,
      10% 47%,
      11% 52%,
      15% 51%,
      37% 51%,
      69% 21%,
      35% 31%,
      40% 4%,
      43% 4%,
      42% 1%,
      40% 0%,
      39% 2%,
      40% 4%,
      35% -0%,
      34% 1%,
      32% 1%,
      32% -1%,
      35% -0%,
      40% 4%,
      13% 0%,
      7% -1%,
      8% 4%,
      10% 4%,
      12% 3%,
      13% 0%,
      22% 16%,
      24% 17%,
      25% 15%,
      25% 11%,
      22% 10%,
      20% 12%,
      22% 16%,
      13% -0%,
      40% 4%,
      35% 31%
    );
  }
}
.stars::after {
  content: '';
  display: block;
  clip-path: polygon(
    36% 55%,
    34% 55%,
    34% 53%,
    36% 52%,
    36% 54%,
    71% 22%,
    72% 20%,
    70% 20%,
    71% 22%,
    62% 6%,
    61% 4%,
    61% 4%,
    63% 4%,
    62% 6%,
    71% 22%,
    36% 54%,
    32% 32%,
    31% 31%,
    33% 30%,
    32% 32%,
    23% 15%,
    21% 15%,
    22% 14%,
    23% 13%,
    24% 14%,
    23% 15%,
    32% 32%,
    36% 54%,
    8% -0%,
    9% 1%,
    11% -1%,
    8% -0%,
    36% 54%
  );
  background-color: rgb(220, 199, 49);
}
.background {
  clip-path: polygon(
    -1% 60%,
    5% 58%,
    9% 60%,
    14% 66%,
    22% 66%,
    28% 64%,
    34% 63%,
    40% 61%,
    50% 59%,
    54% 60%,
    58% 57%,
    62% 57%,
    67% 53%,
    73% 53%,
    77% 54%,
    82% 52%,
    84% 46%,
    88% 42%,
    95% 40%,
    100% 36%,
    100% 100%,
    0% 100%
  );
  background-color: rgb(207, 229, 234);
  animation: backgroundcloud 5s infinite alternate linear;
}
@keyframes backgroundcloud {
  0% {
  }
  100% {
    clip-path: polygon(
      -0% 59%,
      5% 61%,
      10% 63%,
      18% 65%,
      25% 63%,
      31% 62%,
      38% 62%,
      43% 59%,
      51% 58%,
      55% 59%,
      59% 61%,
      62% 60%,
      67% 58%,
      72% 55%,
      77% 53%,
      82% 51%,
      88% 48%,
      92% 42%,
      95% 37%,
      100% 36%,
      100% 100%,
      -1% 101%
    );
  }
}
.background::before {
  content: '';
  display: block;
  clip-path: polygon(
    0% 74%,
    6% 76%,
    12% 75%,
    20% 77%,
    33% 76%,
    43% 71%,
    46% 71%,
    49% 73%,
    65% 64%,
    65% 64%,
    71% 64%,
    84% 62%,
    88% 60%,
    89% 57%,
    89% 57%,
    94% 56%,
    93% 53%,
    95% 52%,
    99% 50%,
    100% 51%,
    100% 100%,
    0% 100%
  );
  background-color: rgb(58, 93, 149);
}
.background::after {
  content: '';
  display: block;
  clip-path: polygon(
    0% 91%,
    5% 89%,
    7% 86%,
    7% 86%,
    14% 86%,
    31% 81%,
    45% 81%,
    56% 82%,
    57% 63%,
    58% 82%,
    63% 81%,
    71% 82%,
    80% 85%,
    86% 91%,
    92% 90%,
    100% 91%,
    100% 100%,
    0% 100%
  );
  background-color: rgb(119, 160, 166);
}
.cloud1 {
  clip-path: polygon(
    0% 11%,
    6% 22%,
    15% 26%,
    24% 22%,
    24% 22%,
    35% 12%,
    44% 10%,
    44% 10%,
    59% 14%,
    65% 27%,
    64% 35%,
    58% 41%,
    51% 39%,
    49% 31%,
    55% 37%,
    59% 36%,
    62% 31%,
    60% 22%,
    53% 16%,
    43% 14%,
    43% 14%,
    33% 17%,
    23% 28%,
    15% 31%,
    4% 26%,
    0% 20%
  );
  background-color: rgb(202, 222, 231);
  animation: cloud1 4s infinite alternate ease-in;
}
@keyframes cloud1 {
  0% {
  }
  100% {
    clip-path: polygon(
      0% 11%,
      7% 25%,
      19% 28%,
      26% 23%,
      32% 18%,
      40% 13%,
      50% 11%,
      60% 16%,
      65% 26%,
      63% 36%,
      58% 42%,
      53% 42%,
      49% 38%,
      49% 31%,
      51% 35%,
      56% 36%,
      59% 34%,
      60% 27%,
      54% 20%,
      48% 16%,
      38% 18%,
      30% 23%,
      21% 31%,
      13% 32%,
      5% 30%,
      0% 24%
    );
  }
}
.cloud2 {
  clip-path: polygon(
    68% 45%,
    66% 45%,
    65% 46%,
    64% 49%,
    65% 53%,
    69% 55%,
    73% 54%,
    75% 51%,
    76% 46%,
    75% 41%,
    71% 37%,
    64% 38%,
    59% 43%,
    53% 43%,
    49% 38%,
    48% 32%,
    48% 37%,
    50% 42%,
    56% 45%,
    62% 44%,
    69% 41%,
    73% 43%,
    73% 48%,
    72% 52%,
    69% 52%,
    67% 51%,
    66% 49%,
    66% 47%
  );
  background-color: rgb(202, 222, 231);
  animation: cloud2 3s infinite alternate ease-out;
}
@keyframes cloud2 {
  0% {
  }
  100% {
    clip-path: polygon(
      68% 47%,
      65% 48%,
      64% 51%,
      65% 54%,
      69% 56%,
      73% 56%,
      76% 54%,
      78% 48%,
      77% 42%,
      73% 37%,
      67% 36%,
      63% 39%,
      59% 40%,
      56% 41%,
      53% 39%,
      50% 35%,
      51% 39%,
      55% 43%,
      61% 43%,
      65% 42%,
      69% 40%,
      74% 43%,
      75% 48%,
      74% 52%,
      71% 53%,
      69% 54%,
      67% 53%,
      66% 49%
    );
  }
}
.cloud3 {
  clip-path: polygon(
    48% 28%,
    50% 32%,
    54% 32%,
    55% 27%,
    52% 24%,
    45% 21%,
    35% 24%,
    29% 30%,
    34% 27%,
    42% 24%,
    49% 25%,
    53% 29%,
    52% 30%
  );
  background-color: rgb(202, 222, 231);
  animation: cloud3 2s infinite alternate ease-out;
}
@keyframes cloud3 {
  0% {
  }
  100% {
    clip-path: polygon(
      50% 28%,
      54% 29%,
      55% 26%,
      52% 22%,
      46% 20%,
      39% 23%,
      33% 27%,
      26% 33%,
      31% 30%,
      38% 26%,
      45% 23%,
      50% 24%,
      52% 27%
    );
  }
}
.cloud4 {
  clip-path: polygon(
    42% 24%,
    38% 25%,
    28% 38%,
    19% 44%,
    6% 47%,
    0% 45%,
    0% 51%,
    13% 50%,
    25% 44%,
    30% 38%,
    35% 32%,
    38% 27%
  );
  background-color: rgb(202, 222, 231);
  animation: cloud4 2.5s infinite alternate ease-out;
}
@keyframes cloud4 {
  0% {
  }
  100% {
    clip-path: polygon(
      44% 24%,
      40% 23%,
      37% 26%,
      25% 46%,
      14% 52%,
      0% 55%,
      0% 58%,
      16% 54%,
      27% 46%,
      32% 37%,
      35% 32%,
      39% 26%
    );
  }
}
.cloud5 {
  clip-path: polygon(
    63% 38%,
    67% 34%,
    76% 34%,
    80% 38%,
    86% 43%,
    92% 43%,
    100% 38%,
    92% 41%,
    87% 41%,
    82% 37%,
    78% 32%,
    73% 31%,
    69% 31%,
    66% 33%
  );
  background-color: rgb(202, 222, 231);
  animation: cloud5 3.5s infinite alternate ease-out;
}
@keyframes cloud5 {
  0% {
  }
  100% {
    clip-path: polygon(
      54% 43%,
      70% 36%,
      78% 37%,
      81% 37%,
      86% 39%,
      92% 38%,
      100% 38%,
      93% 36%,
      88% 37%,
      84% 36%,
      78% 34%,
      71% 33%,
      66% 35%,
      62% 37%
    );
  }
}
.cloud6 {
  clip-path: polygon(
    46% 26%,
    41% 27%,
    38% 32%,
    37% 38%,
    39% 45%,
    43% 49%,
    49% 51%,
    56% 51%,
    64% 44%,
    56% 49%,
    53% 49%,
    48% 49%,
    43% 46%,
    40% 42%,
    39% 37%,
    40% 31%,
    41% 29%
  );
  background-color: rgb(202, 222, 231);
  animation: cloud6 4.5s infinite alternate ease-out;
}
@keyframes cloud6 {
  0% {
  }
  100% {
    clip-path: polygon(
      42% 29%,
      40% 33%,
      39% 37%,
      39% 43%,
      45% 49%,
      53% 50%,
      58% 49%,
      62% 45%,
      68% 45%,
      63% 43%,
      58% 47%,
      54% 48%,
      47% 47%,
      43% 44%,
      41% 40%,
      41% 36%,
      41% 34%
    );
  }
}
.tree {
  clip-path: polygon(
    14% 100%,
    11% 98%,
    9% 97%,
    12% 97%,
    13% 97%,
    12% 95%,
    10% 89%,
    11% 83%,
    12% 78%,
    12% 80%,
    14% 75%,
    14% 71%,
    13% 63%,
    13% 55%,
    14% 51%,
    14% 48%,
    16% 51%,
    14% 46%,
    13% 39%,
    13% 37%,
    14% 27%,
    14% 36%,
    16% 37%,
    16% 31%,
    18% 30%,
    18% 25%,
    17% 20%,
    17% 10%,
    17% 7%,
    18% 2%,
    20% 6%,
    18% 20%,
    21% 29%,
    22% 43%,
    24% 38%,
    23% 52%,
    25% 60%,
    25% 66%,
    26% 63%,
    26% 72%,
    29% 74%,
    27% 70%,
    27% 66%,
    29% 59%,
    29% 63%,
    32% 70%,
    36% 75%,
    38% 82%,
    37% 90%,
    36% 94%,
    38% 96%,
    39% 92%,
    38% 87%,
    40% 84%,
    42% 82%,
    45% 78%,
    43% 82%,
    41% 85%,
    41% 90%,
    46% 95%,
    47% 99%,
    46% 100%
  );
  background-color: rgb(42, 66, 58);
  animation: tree 2s infinite alternate linear;
}
@keyframes tree {
  0% {
  }
  100% {
    clip-path: polygon(
      14% 100%,
      10% 99%,
      8% 98%,
      11% 98%,
      13% 97%,
      12% 95%,
      11% 88%,
      11% 82%,
      9% 76%,
      12% 80%,
      15% 76%,
      14% 71%,
      13% 63%,
      13% 55%,
      14% 51%,
      14% 48%,
      16% 51%,
      14% 46%,
      12% 40%,
      12% 36%,
      12% 28%,
      13% 37%,
      15% 38%,
      15% 31%,
      17% 35%,
      19% 30%,
      16% 20%,
      15% 12%,
      15% 7%,
      17% 4%,
      17% 9%,
      17% 20%,
      21% 29%,
      21% 44%,
      23% 38%,
      23% 49%,
      23% 61%,
      24% 67%,
      25% 62%,
      26% 72%,
      29% 74%,
      28% 67%,
      29% 63%,
      31% 58%,
      31% 64%,
      32% 69%,
      36% 75%,
      38% 82%,
      37% 90%,
      36% 94%,
      38% 96%,
      40% 92%,
      40% 88%,
      40% 85%,
      41% 81%,
      42% 76%,
      42% 81%,
      41% 85%,
      42% 90%,
      44% 95%,
      47% 99%,
      46% 100%
    );
  }
}
</style>
